// 点击按钮防抖或节流
export default {
  data() {
    return {
      debounceTimer: null,
      throttleTimer: null
    }
  },
  methods: {
    /*
     * 防抖函数
     * 触发事件后，在n秒后执行；如果n秒内又触发事件，则重新计算时间
     * 用处：多用于input框输入时，显示匹配的输入内容。（n秒后延迟执行）
     */
    debounceMethods(func, ...args) {
      const context = this
      // 重新计算时间
      if (this.debounceTimer) clearTimeout(this.debounceTimer)
      this.debounceTimer = setTimeout(() => {
        func.apply(context, args)
        this.debounceTimer = null
      }, 1000)
    },
    /*
     * 节流函数
     * 触发事件后，立即执行；但在n秒内连续触发则不执行，不会重新计算时间
     * 用处：防止按钮重复点击，页面滚动，窗口resize等。
     */
    throttleMethods(func, ...args) {
      if (this.throttleTimer != null) {
        return
      }
      const context = this
      func.apply(context, args)
      this.throttleTimer = setTimeout(() => {
        clearTimeout(this.throttleTimer)
        this.throttleTimer = null
      }, 1000)
    },

    /*
     * 防抖函数
     * 触发事件后，在n秒后执行；如果n秒内又触发事件，则重新计算时间
     * ！注意 防抖函数中return的函数不能使用箭头函数，如果使用箭头函数则this就会指向
     */
    debounce(func, wait = 1000) {
      let timer
      return function () {
        const context = this
        const args = arguments
        if (timer) {
          clearTimeout(timer)
        }
        timer = setTimeout(() => {
          func.apply(context, args)
        }, wait)
      }
    },
    /*
     * 节流函数
     * 触发事件后，立即执行；但在n秒内连续触发则不执行
     * 节流函数中return的函数不能使用箭头函数，如果使用箭头函数则this就会指向
     */
    throttle(func, wait = 1000) {
      let timer
      return function () {
        if (timer != null) {
          return
        }

        const context = this
        const args = arguments
        func.apply(context, args)
        timer = setTimeout(() => {
          clearTimeout(timer)
          timer = null
        }, wait)
      }
    }
  }
}
